<template>
  <div class="home">
    <!-- 头部搜索框 -->
    <van-sticky>
      <header-input></header-input>
    </van-sticky>
    <!-- 底部导航 -->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="/cookHome">下厨房</van-tabbar-item>
      <van-tabbar-item icon="add-o" to="/add"
        >分享
        <!-- <img v-show="active!=1" width="35px" src="/添加2.png" type="icon">
        <img v-show="active==1" width="35px" src="/添加4.png" type="icon"> -->
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/me">我的</van-tabbar-item>
    </van-tabbar>
    <!-- 选择显示区域 -->
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      select: 0,
      active: 0,
      list: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
  },
  watch:{
    active(){
      sessionStorage.setItem('active',this.active)
    }
  },
  mounted() {
    // this.active = (sessionStorage.getItem('active')=='false'?0:sessionStorage.getItem('active'));
    // console.log(this.active);
    // console.log(1);
  },
  
  
};
</script>
<style>
.home .vanList {
  margin-bottom: 50px;
}
.home .van-tabbar-item--active {
  color: #ff3333;
}
.home .van-tabs__line {
  background-color: #ff3333;
}
</style>
